// Diff
$diff-gutter-bg = #efefef;
$diff-gutter-border = #999999;
$diff-bg = #d8f2ff;
$diff-border = #a2d7f2;
$diff-copy-color = #000000;
$diff-copy-shadow = #ffffff;

$input-border = #ccc;
$modal-settings-panel-bg = #f8f8f8;
$scroll-bg = rgba(255, 255, 255, 0.50);
$tab-highlight-bg = #5E9EF3;
$tab-highlight-bg-darker = #8ab0f3;

.git-merge {
  width: 90vw;
//   .modal-dialog {
//     width: 90%;
//   }
//   .modal-body {
//     padding: 0;
//   }
  hr {
    margin: 0
  }
  .modal-ops {
    padding-top: 20px
  }

  .diffModal {
    height: 500px;
    overflow: auto;
    position: relative;
    .loading {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 40px;
      z-index: 10;
      background: #FFF;
    }
  }
  .mergeTitle {
    display: flex;
    flex-direction: row;
    &>div {
      flex-grow: 1;
      text-align: center;
    }

    .gutterTitle {
      flex: 0 0 60px;
    }
  }
  #flex-container {
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    position: absolute;
    bottom: 0;
    width: 100%;
    top: 0px !important;
    left: 0px;

    /* these 3 lines are to prevents an unsightly scrolling bounce affect on Safari */
    height: 100%;
    width: 100%;
    overflow: auto;
    min-height: 300px;
    &.mergeContainer {
      padding-top: 20px;
    }
    &.diffContainer {
      padding-top: 0;
      padding-bottom: 0;
      .CodeMirror-merge-2pane .CodeMirror-merge-pane {
        height: 100%;

      }
      .CodeMirror-merge, .CodeMirror-merge .CodeMirror {
        height: 100%;
      }
    }
    &>div {
      flex-grow: 1;
      -webkit-flex-grow: 1;
      position: relative;
      &#gutter, &#gutterLeft, &#gutterRight {
        flex: 0 0 60px;
        -webkit-flex: 0 0 60px;
        border-left: 1px solid #999999;
        border-right: 1px solid #999999;
        background-color: #efefef;
        overflow: hidden;
      }
    }
  }

  #editor1 {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
  }
  #editor2 {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
  }
  #editor3 {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
  }
  .acediff-diff {
    background-color: #d8f2ff;
    border-top: 1px solid #a2d7f2;
    border-bottom: 1px solid #a2d7f2;
    position: absolute;
    z-index: 4;
    &.targetOnly {
      height: 0px !important;
      border-top: 1px solid #a2d7f2;
      border-bottom: 0px;
      position: absolute;
      &.bottomLine {
        margin-top: 15px;
      }
    }
  }
  .acediff-connector {
    fill: #d8f2ff;
    stroke: #a2d7f2;
  }

  .acediff-copy-left {
    float: right;
  }
  .acediff-copy-right,
  .acediff-copy-left {
    position: relative;
  }
  .acediff-copy-right div {
    color: #000000;
    text-shadow: 1px 1px #ffffff;
    position: absolute;
    margin: -3px 2px;
    cursor: pointer;
  }
  .acediff-copy-right div:hover {
    color: #004ea0;
  }
  .acediff-copy-left div {
    color: #000000;
    text-shadow: 1px 1px #ffffff;
    position: absolute;
    right: 0px;
    margin: -3px 2px;
    cursor: pointer;
  }
  .acediff-copy-left div:hover {
    color: #c98100;
  }

  #flex-container>div#gutter, #flex-container>div#gutterLeft, #flex-container>div#gutterRight {
    border-left: 1px solid $diff-gutter-border;
    border-right: 1px solid $diff-gutter-border;
    background-color: $diff-gutter-bg;
  }
  .mergeTitle {
    background-color: $diff-gutter-bg;
  }
  #gutterLeft svg, #gutterRight svg {
    background-color: $diff-gutter-bg;
  }
  .acediff-diff {
    background-color: $diff-bg;
    border-top: 1px solid $diff-border;
    border-bottom: 1px solid $diff-border;
  }
  .acediff-diff.targetOnly {
    border-top: 1px solid $diff-border;
  }
  .acediff-connector {
    fill: $diff-bg;
    stroke: $diff-border;
  }
  .acediff-copy-right div {
    color: $diff-copy-color;
    text-shadow: 1px 1px $diff-copy-shadow;
    position: absolute;
    margin: -3px 2px;
    cursor: pointer;
  }
  .acediff-copy-right div:hover {
    color: #004ea0;
  }
  .acediff-copy-left div {
    color: $diff-copy-color;
    text-shadow: 1px 1px $diff-copy-shadow;
    position: absolute;
    right: 0px;
    margin: -3px 2px;
    cursor: pointer;
  }
  .acediff-copy-left div:hover {
    color: #c98100;
  }
}
.git-rebase-start-container {
  width: 760px;
}
.btn-list {
  .btn-default {
    width: 100%;
    margin-bottom: 6px;
    &:last-child {
      margin-bottom: 0;
    }
  }
}
.commits-list {
  .public_fixedDataTable_main {
    border-color: $input-border;
  }
  .public_fixedDataTableCell_main {
    border-color: $input-border;
  }
  .public_fixedDataTableRow_main {
    background: $modal-settings-panel-bg;
  }
  .public_fixedDataTableCell_main {
    background: none;
  }
  .public_fixedDataTable_header, .public_fixedDataTable_header .public_fixedDataTableCell_main {
    background-image: none;
    background: $modal-settings-panel-bg;
  }
  .public_fixedDataTableRow_even {
    background: none;
  }
  .public_fixedDataTable_header, .public_fixedDataTable_hasBottomBorder {
    border-color: $input-border;
  }
  .public_Scrollbar_face:after {
    background-color: rgba(91, 91, 91, 0.50);
    border-radius: 0;
  }
  .public_Scrollbar_main.public_Scrollbar_mainActive, .public_Scrollbar_main:hover {
    background-color: $scroll-bg;
  }
  .public_Scrollbar_mainOpaque, .public_Scrollbar_mainOpaque.public_Scrollbar_mainActive, .public_Scrollbar_mainOpaque:hover {
    background-color: $scroll-bg;
  }
  .selected .public_fixedDataTableCell_cellContent {
    background-color: $tab-highlight-bg;
    color: $component-active-color;
  }
  .ScrollbarLayout_mainVertical {
    width: 8px;
  }
  .ScrollbarLayout_faceVertical:after {
    left: 0;
    right: 0;
  }
}

.git-rebase-input-container {
  textarea {
    min-width: 100%;
    max-width: 100%;
    border-color: $input-border;
  }
}

.git-resolve-conflicts {
  .title {
    border-bottom: 1px solid $input-border;
    padding-bottom: 13px;
  }
  .modal-ops {
    padding-top: 20px;
  }
}